<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同显示类型的例子</title>
  <style>
      span {
          margin: 20px;
          padding: 20px;
          width: 80px;
          height: 50px;
          background-color: lightblue;
          border: 2px solid blue;
          display: inline-block;
      }
      .box {
          border: 2px solid red;
          width: 50%;
          height: 50%;
      }
      nav {
          margin-top: 30px;
      }
      .links-list {
          list-style: none;
      }
      li {
          display: inline-block;
      }
      a {
          background-color: rgb(179 57 81);
          color: #FFFFFF;
          text-decoration: none;
          padding: 1em 2em;
      }
      a:hover {
          background-color: rgb(66 28 40);
          color: #fff;
      }
  </style>
</head>
<body>
<div class="box">
    <p>
        I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
    </p>
</div>

<nav>
    <ul class="links-list">
        <li><a href="">Link one</a></li>
        <li><a href="">Link two</a></li>
        <li><a href="">Link three</a></li>
    </ul>
</nav>
</body>
</html>